javascript 之 this

发表于 | 分类于

1 this 可以绑定一个对象

2 为什么使用this

这段代码可以在不同的上下文对象（ me 和 you ）

3 this 在es5 中是上下文调用该函数的对象。箭头函数的话是看当前的词法作用域。

4 this 的四种绑定原则

（1）默认绑定

非严格模式指向全局作用域window ，严格模式指向undefined

1
2
3
4
5
function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2

（2）隐式绑定

另一条需要考虑的规则是调用位置是否有上下文对象,

1）对象里的函数并不代表对象拥有该函数，其实只是跟函数做了个关联，函数还是单独存在的。

2）dom 事件中this 是绑定当前dom 。

3）setTimeout() 中指向window

1
2
3
4
5
6
7
8
9
10
11
12
function foo() {
console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42

（3）显式绑定

函数用 call、apply或者 bind 调用。

1
2
3
4
5
6
7
8
9
10
var obj = {
    x: 10
}
function foo(){
    console.log(this);     //{x: 10}
    console.log(this.x);   //10
}
foo.call(obj);
foo.apply(obj);
foo.bind(obj)();

（4）构造函数

构造函数其实是在调用普通函数的基础上做了一些而外的4步操作

  1. 创建（或者说构造）一个全新的对象。
  2. 这个新对象会被执行[[原型]]连接。
  3. 这个新对象会绑定到函数调用的 this 。
  4. 如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象。
1
2
3
4
5
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2

5 箭头函数中的this 是当前词法作用域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = {
    x: 10,
    foo: function() {
        var fn = () => {
            return () => {
                return () => {
                    console.log(this);      //Object {x: 10}
                    console.log(this.x);    //10
                }
            }
        }
        fn()()();
    }
}
obj.foo();